<template>
    <div>
        <el-container>
            <el-aside width="250px">
                <el-header>
                    <el-button @click="add" round>添加</el-button>
                    <el-button @click="update" round>修改</el-button>
                    <el-button @click="del" round>删除</el-button>   
                </el-header>
                <el-button type="text" style="font-size: 20px" @click="showAll">全部显示>>></el-button>
                <el-tree 
                    :data="data" 
                    node-key="dictKeyId"
                    ref="dictTree" 
                    :props="defaultProps"
                    @node-click="handleNodeClick">
                </el-tree>
            </el-aside>
            <el-main>
                <el-header>
                    <div style="float: right">
                        <div style="float: left">
                            <el-input v-model="queryParams.dictValueName" placeholder="字典名称" style="float: left"></el-input>
                        </div>
                        &nbsp; &nbsp;
                        <el-button type="primary" @click="dictValueShow()">查询</el-button>
                        <el-button type="success" @click="addDictValue">添加</el-button>
                    </div>
                </el-header>
                <template>
                    <el-table ref="multipleTable"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                        <el-table-column type="selection"> </el-table-column>
                        <el-table-column prop="dictValueName" label="字典值名称"></el-table-column>
                        <el-table-column prop="dictValueCode" label="字典值代码"></el-table-column>
                        <el-table-column prop="dictKeyName" label="字典分类名称"></el-table-column>
                        <el-table-column prop="state" label="状态">
                            <template slot-scope="scope">
                                <el-switch :value="scope.row.state" :active-value="1" :inactive-value="0"></el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createUser" label="创建人"> </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                        <el-table-column fixed="right" label="操作" width="220">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit"  @click="editDictValue(scope.row)">编辑 </el-button>
                                <el-button type="danger" icon="el-icon-delete"  @click="deleteDictValue(scope.row)">删除 </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryParams.pageIndex"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="queryParams.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount"
                        >
                        </el-pagination>
                    </div>
                </template>
            </el-main>
        </el-container>
        <div>
            <el-dialog :title="dialogDictKeyTitle" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="字典名称">
                        <el-input v-model="form.dictKeyName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="字典代码">
                        <el-input v-model="form.dictKeyCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="启用/禁用" prop="status">
                        <el-switch v-model="form.state" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-dialog :title="dialogDictValueTitle" :visible.sync="dialogDictValueVisible">
                <el-form :model="formDict">
                    <el-form-item label="字典键名称">
                        <el-input v-model="formDict.dictKeyName" readonly="readonly"></el-input>
                    </el-form-item>
                    <el-form-item label="字典值名称">
                        <el-input v-model="formDict.dictValueName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="字典值代码">
                        <el-input v-model="formDict.dictValueCode" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="启用/禁用" prop="status">
                        <el-switch v-model="formDict.state" :active-value="1" :inactive-value="0"></el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogDictValueVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmitDictValue">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { DictShow, DictDetails, DictAdd, DictUpdate, DictDelete, EditDictValue, AddDictValue, DeleteDictValue } from '@/api/dict';
export default {
    data() {
        return {
            dialogFormVisible: false, 
            dialogDictValueVisible: false,
            dialogDictKeyTitle:'', //对话框标题
            dialogDictValueTitle:'', //对话框标题
            queryParams: {     
                pageIndex: 1,
                pageSize: 10,   
                dictKeyId: 0,      //按字典分类ID查
                dictValueName:''   //按字典值得名称查
            },
            data:[],              //字典分类列表
            form: {
                dictKeyName: '',
                dictKeyCode: '',
                state: 0,
            },
            formDict: {
                dictValueName: '',
                dictValueCode: '',
                dictKeyId: '',
                dictKeyName:'',
                state: 0,
            },
            tableData: [],
            totalCount: 0,
            defaultProps: {
                children: 'children',
                label: 'dictKeyName',
                value: 'dictKeyId'
            },
        };
    },
    mounted() {
        this.show();
        this.dictValueShow();
    },
    methods: {
        showAll(){
            this.queryParams.dictKeyId = 0;
            this.queryParams.dictValueName = '';
            this.dictValueShow(); //重新加载字典
        },
        addDictValue() {
            //获取左侧被选中的节点
            let node = this.$refs.dictTree.getCurrentNode();
            if(node == null){
                this.$message.error('请先选择左侧的字典分类');
                return;
            }
            this.formDict = Object.assign({});            //清空表单数据
            this.formDict.dictKeyId = node.dictKeyId;     //反填字典键的主键
            this.formDict.dictKeyName = node.dictKeyName; //反填字典键的名称
            this.dialogDictValueTitle = "添加字典值";
            this.dialogDictValueVisible = true;
        },
        editDictValue(row){
            this.formDict =Object.assign({}, row)  ;        //进行反填
            this.dialogDictValueTitle = "修改字典值";
            this.dialogDictValueVisible = true;
        },
        deleteDictValue(row){
            this.$confirm('此操作将执行永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let id = row.dictValueId;
                //调用删除接口
                DeleteDictValue(id).then(res => {
                    if(res.data > 0){
                        this.$message({ message: '删除成功',type: 'success'});
                        this.dictValueShow();
                    }
                });
            }).catch(() => {
            });
        },
        onSubmitDictValue(){
            //添加
            if( this.dialogDictValueTitle == "添加字典值"){
                AddDictValue(this.formDict).then((res) => {
                    this.dictValueShow();
                    this.dialogDictValueVisible = false;        
                }); 
            }
            
            //修改
            if(this.dialogDictValueTitle == "修改字典值"){
                EditDictValue(this.formDict).then(res => {
                    if(res.data > 0){
                        this.dialogDictValueVisible = false;
                        this.dictValueShow();
                    }
                });
            }
        },
        //添加字典
        add() {
            this.form= Object.assign({}) ; 
            this.dialogDictKeyTitle = "添加数据字典";
            this.dialogFormVisible = true;
        },
        //修改反填
        update(){
            //获取左侧被选中的节点
            let node = this.$refs.dictTree.getCurrentNode();
            if(node == null){
                this.$message.error('请选择你要修改的字典分类');
                return;
            }
            
            this.form =Object.assign({}, node)  ;        //进行反填
            // this.form.state = (this.form.state == 1); //把状态转换成布尔
            this.dialogDictKeyTitle = "修改数据字典";
            this.dialogFormVisible = true;
        },
        //添加/修改提交
        onSubmit() {
            //添加
            if( this.dialogDictKeyTitle == "添加数据字典"){
                console.log("添加字典：",this.form);
                DictAdd(this.form).then((res) => {
                    this.show();
                    this.dialogFormVisible = false;        
                }); 
            }
            
            //修改
            if(this.dialogDictKeyTitle == "修改数据字典"){
                DictUpdate(this.form).then(res => {
                    if(res.data > 0){
                        this.dialogFormVisible = false;
                        this.show();
                    }
            });
        }
            
        },
        //删除字典
        del() {
            //删除
              //获取左侧被选中的节点
            let id = this.$refs.dictTree.getCurrentKey();
            if(id == null){
                this.$message.error('请选择你要删除的字典分类');
                return;
            }
            this.$confirm('此操作将执行永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //调用删除接口
                DictDelete(id).then(res => {
                    if(res.data > 0){
                        this.$message({ message: '删除成功',type: 'success'});
                        this.show();

                        this.showAll();
                    }
                    else{
                        this.$message({ message: res.msg, type: 'error'});
                    }
                });
            }).catch(() => {
            });
            
        },
        //显示字典值（右边的表格）
        async dictValueShow() {

            //调用显示接口
            await DictDetails(this.queryParams).then(res => {
                console.log(res.data)
                this.tableData = res.data.pageList;
                this.totalCount = res.data.totalCount;
            });
        }, 
        //显示字典分类（左边的树）
        async show() {
            await DictShow().then(res => {
                this.data = res.data;
            });
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        //点击左边树的节点，加载右边的列表
        handleNodeClick(node) {
            let id = node.dictKeyId; //获取被选中的节点的主键值
            this.queryParams.dictKeyId = id;
            this.dictValueShow();
        },
        //页容量
        handleSizeChange(val) {
            this.queryParams.pageSize = val;
            this.dictValueShow();
        },
        //上一页下一页
        handleCurrentChange(val) {
            this.queryParams.pageIndex = val;
            this.dictValueShow();
        },
    }
};
</script>
